<template>
    <div id="openroom">
        <mt-header fixed title="开房有喜">
            <mt-button icon="back" @click.native="$router.go(-1);" slot="left">返回</mt-button>
        </mt-header>
        <div v-show="!ruleshow" @click="ruleshow=!ruleshow" class="lookroole"><button>查看规则</button>
        </div>
        <div v-show="ruleshow"><img  id="ruleimg"  style="width: 100%;   vertical-align: top;" src="../../assets/img/1_01.png" alt=""></div>
        <div class="money">
            <div class="topone top">
                <div class="allmoney">
                    <span class="title">总钻石收益(个)</span><br/>{{active.TotalDiamond}}
                </div>
            </div>
            <div class="topone top">
                <div class="allmoney">
                    <span class="title">昨日钻石收益(个)</span><br/> {{active.zsjl}}
                </div>
                <div class="allmoney">
                    <span class="title">昨日开房(次)</span><br/> {{active.kfsl}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        MessageBox
    } from "mint-ui";
    export default {
        name: "openroom",
        data() {
            return {
                ruleshow: true,
                active: {}
            }
        },
        methods: {
            initView() {
                let getPatam = {
                    params: {
                        'functionname': "openhouse" //活动  开房有喜
                    }
                }
                let that = this;
                this.$http.get(`${this.baseUrl}/Main/GetData`, getPatam).then(response => {
                     console.log(response)
                    let data = response.data;
                    if (data.code == 1) {
                        that.active = data.body;
                        //MessageBox("提示",data.msg)
                    } else {
                        MessageBox("提示", data.msg)
                    }
                })
            },
             handleScroll: function() {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                // console.log(scrollTop)
            },
            getBrowserInterfaceSize() {
                var pageWidth = window.innerWidth;
                var pageHeight = window.innerHeight;
                if (typeof pageWidth != "number") {
                    //在标准模式下面
                    if (document.compatMode == "CSS1Compat") {
                        pageWidth = document.documentElement.clientWidth;
                        pageHeight = document.documentElement.clientHeight;
                    } else {
                        pageWidth = document.body.clientWidth;
                        pageHeight = window.body.clientHeight;
                    }
                }
                return {
                    pageWidth: pageWidth,
                    pageHeight: pageHeight
                }
            }
        },
        created() {
            this.initView();
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll);
            let that = this;
            document.getElementById("ruleimg").onload = function() {
                document.body.scrollTop = 0;
                var i = 0;
                that.timer = setInterval(function() {
                    document.addEventListener("touchstart", function() {
                        if (that.timer) {
                            clearInterval(that.timer)
                        }
                    })
                    var brower = that.getBrowserInterfaceSize();
                    var hscreen = brower.pageHeight;
                    var h = document.body.offsetHeight;
                    // console.log(h, hscreen)
                    if (i < (h - hscreen)) {
                        window.scrollTo(0, i++)
                    } else {
                        clearInterval(that.timer)
                    }
                }, 50)
            }
        },
        destroyed() {
            window.removeEventListener("scroll", this.handleScroll);
            document.removeEventListener("touchstart", function() {
                if (that.timer) {
                    clearInterval(that.timer)
                }
            });
          
        }
    };
</script>
<style lang="scss" scoped>
    .mint-header {
        background-color: #c94138;
    }
    .top {
        display: flex;
        background: #c94138;
        .allmoney {
            padding: 0px 0 15px 0;
            flex: 1;
            color: #fff;
            text-align: center;
            font-size: 30px;
            .title {
                color: #f6ef8a;
                font-size: 13px;
            }
        }
    }
    .lookroole {
        text-align: center;
        padding: 10px 0;
        button {
            background: transparent;
            padding: 10px 40px;
            font-weight: 600;
            font-size: 16px;
        }
    }
</style>

